<template>
  <div class="setting-form12">
    <Row type="flex"
         align="middle"
         justify="center">
      <Col>
      <Form ref="formDynamic"
            :model="formDynamic"
            :rules="ruleValidate"
            :label-width="110">
        <FormItem v-for="(item, index) in formDynamic.items"
                  :key="index"
                  label="店内区域名称："
                  :prop="'items.' + index + '.value'"
                  :rules="{ required: true, validator: validatePass, trigger: 'blur' }">
          <Row type="flex"
               align="middle">
            <Col>
            <Input type="text"
                   v-model="item.value"
                   style='width:280px'
                   clearable
                   @on-keyup='keyUp'
                   :maxlength='20'
                   :index='item.index'></Input>
            </Col>
            <Col style='margin-left:16px'>
            <Icon type="ios-trash"
                  style='padding-right:20px'
                  @click="handleRemove(index)"
                  size='20'
                  v-if='formDynamic.items.length > 1' />
            <Icon type="ios-add-circle"
                  style='color: #2D8CF0'
                  @click="handleAdd"
                  size='20'
                  v-if='index === formDynamic.items.length-1' />
            </Col>
          </Row>
        </FormItem>
        <FormItem>
          <Button type="primary"
                  @click="handleSubmit('formDynamic')"
                  style="width:100px;margin-top:8px">确定</Button>
        </FormItem>
      </Form>
      </Col>
    </Row>
  </div>
</template>
<script>
import { getDicQuery, setDicSave } from '@/api/setting'
import { routeEqual } from '@/libs/util'
export default {
  data () {
    const validatePass = (rule, value, callback) => {
      var regexp = /[^\u4e00-\u9fa5a-zA-Z0-9]/
      if (value === '') {
        callback(new Error('区域名称不能为空'))
      } else if (regexp.test(value)) {
        callback(new Error('只能输入数字、英文或中文'))
      } else {
        callback()
      }
    }
    return {
      validatePass: validatePass,
      title: '店内区域设置',
      formDynamic: {
        items: [
          {
            value: 'A',
            index: 1
          },
          {
            value: 'B',
            index: 2
          },
          {
            value: 'C',
            index: 3
          },
          {
            value: 'D',
            index: 4
          },
          {
            value: 'E',
            index: 5
          },
          {
            value: 'F',
            index: 6
          }
        ]
      },
      ruleValidate: {},
      paramter: {
        'shopId': this.$route.query.id,
        'merchantId': this.$store.state.user.merchantId,
        'msType': '1'
      }
    }
  },
  methods: {
    closeModal () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
      this.$nextTick(() => {
        this.$router.push({
          name: 'store_setting'
        })
      })
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let arr = []
          this.formDynamic.items.forEach((ele) => {
            arr.push(ele.value)
          })
          let data = Object.assign({}, this.paramter, { 'shopArea': arr.join('|') })
          setDicSave(data).then((res) => {
            if (res.data.status === 200) {
              this.$Message.success('设置成功!')
              this.closeModal()
            } else {
              this.$Message.error(`${res.data.error}`)
            }
          })
        }
      })
    },
    handleAdd () {
      if (this.formDynamic.items.length < 10) {
        this.index++
        this.formDynamic.items.push({
          value: '',
          index: this.index
        })
      } else {
        this.$Message.error('最多添加10个店内区域')
      }
    },
    handleRemove (index) {
      if (this.formDynamic.items.length > 1) {
        this.formDynamic.items.splice(index, 1)
      }
    },
    keyUp (e) {
      e.target.value = e.target.value.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/, '')
    }
  },
  mounted () {
    let key = Object.assign({}, this.paramter, { 'dictKeys': 'shopArea' })
    getDicQuery(key).then((res) => {
      if (res.data.status === 200) {
        let getData = res.data.data[0].shopArea
        if (getData || getData === 0) {
          getData = (getData + '').split('|')
          let newArr = []
          getData.forEach((ele, idx) => {
            let addObj = {}
            addObj.index = idx + 1
            addObj.value = ele
            newArr.push(addObj)
          })
          this.formDynamic.items = newArr.map((val) => {
            return val
          })
        }
      } else {
        this.$Message.error(`${res.data.error}`)
      }
    })
  }
}
</script>

<style scoped>
.setting-form12 {
  padding-top: 60px;
  height: 100%;
}
</style>
